// testLinkDrawStrategy.js
// 独立测试弹窗，绘制2节点+1橘黄重力曲线

export function showLinkDrawTestDialog() {
    // 创建遮罩和弹窗
    let mask = document.createElement('div');
    mask.style = 'position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.25);z-index:9998;';
    let dialog = document.createElement('div');
    dialog.style = 'position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;padding:32px 32px 16px 32px;border-radius:12px;box-shadow:0 4px 32px #0002;z-index:9999;min-width:420px;';
    dialog.innerHTML = '<h3 style="margin:0 0 16px 0">连线策略测试</h3>' +
        '<svg id="test-link-svg" width="400" height="200" style="border:1px solid #eee;background:#fafbfc;"></svg>' +
        '<div style="text-align:right;margin-top:16px"><button id="test-link-close">关闭</button></div>';
    document.body.appendChild(mask);
    document.body.appendChild(dialog);
    document.getElementById('test-link-close').onclick = () => {
        mask.remove();
        dialog.remove();
    };

    // D3 绘制
    const svg = d3.select('#test-link-svg');
    // 两节点坐标
    const nodeA = {x: 100, y: 100, r: 24, color: '#4285f4', name: 'A'};
    const nodeB = {x: 300, y: 100, r: 24, color: '#34a853', name: 'B'};
    // 绘制节点
    svg.append('circle').attr('cx', nodeA.x).attr('cy', nodeA.y).attr('r', nodeA.r).attr('fill', nodeA.color);
    svg.append('text').attr('x', nodeA.x).attr('y', nodeA.y+5).attr('text-anchor', 'middle').attr('fill', '#fff').attr('font-size', 18).attr('font-weight', 'bold').text(nodeA.name);
    svg.append('circle').attr('cx', nodeB.x).attr('cy', nodeB.y).attr('r', nodeB.r).attr('fill', nodeB.color);
    svg.append('text').attr('x', nodeB.x).attr('y', nodeB.y+5).attr('text-anchor', 'middle').attr('fill', '#fff').attr('font-size', 18).attr('font-weight', 'bold').text(nodeB.name);

    // 曲线路径参数
    const mx = (nodeA.x + nodeB.x) / 2;
    const my = (nodeA.y + nodeB.y) / 2 + 40 + 0.15 * Math.abs(nodeA.x - nodeB.x);
    const pathStr = `M${nodeA.x},${nodeA.y} Q${mx},${my} ${nodeB.x},${nodeB.y}`;
    // 画主管道
    const mainPath = svg.append('path')
        .attr('d', pathStr)
        .attr('stroke', 'orange')
        .attr('stroke-width', 6)
        .attr('stroke-opacity', 0.85)
        .attr('fill', 'none')
        .attr('stroke-linecap', 'round');
    // 画内管道（高亮）
    const innerPath = svg.append('path')
        .attr('d', pathStr)
        .attr('stroke', 'orange')
        .attr('stroke-width', 6)
        .attr('stroke-opacity', 1)
        .attr('fill', 'none')
        .attr('stroke-linecap', 'round');

    // 鼓包动画参数
    const pxPerCm = 40; // 1cm=40px
    const speedCmPerS = 2; // 2cm/s
    const pathNode = mainPath.node();
    const totalLen = pathNode.getTotalLength();
    const ballRadius = 18; // 鼓包半径(略大于管道)
    const bulgeLen = 20; // 鼓包影响长度，越小越窄
    let t = 0; // 0~1
    let lastTime = null;

    function animateBulge(now) {
        if (!lastTime) lastTime = now;
        const dt = (now - lastTime) / 1000; // 秒
        lastTime = now;
        // 1cm/s, pxPerCm
    t += (dt * pxPerCm * speedCmPerS) / totalLen;
        if (t > 1) t = 0;
        // 采样若干点，动态调整粗细
        const N = 80;
        let points = [];
        for (let i = 0; i <= N; ++i) {
            const p = i / N;
            const pt = pathNode.getPointAtLength(p * totalLen);
            // 鼓包中心位置
            const bulgeCenter = t * totalLen;
            const dist = Math.abs(p * totalLen - bulgeCenter);
            // 鼓包形状：高斯型
            const bulge = Math.exp(-0.5 * (dist / (bulgeLen/2)) ** 2);
            // 管道粗细变化
            const width = 6 + bulge * (ballRadius - 6);
            points.push({x: pt.x, y: pt.y, w: width});
        }
        // 生成多段path
        let d = '';
        for (let i = 1; i < points.length; ++i) {
            const a = points[i-1], b = points[i];
            d += `M${a.x},${a.y} L${b.x},${b.y}`;
        }
        mainPath.attr('d', pathStr); // 先重置
        mainPath.attr('stroke-width', null); // 清除静态宽度
        mainPath.attr('stroke', 'orange').attr('stroke-opacity', 0.85);
        // 用多段path模拟粗细变化
        svg.selectAll('.bulge-seg').remove();
        for (let i = 1; i < points.length; ++i) {
            svg.append('line')
                .attr('class', 'bulge-seg')
                .attr('x1', points[i-1].x)
                .attr('y1', points[i-1].y)
                .attr('x2', points[i].x)
                .attr('y2', points[i].y)
                .attr('stroke', 'orange')
                .attr('stroke-width', points[i].w)
                .attr('stroke-linecap', 'round')
                .attr('stroke-opacity', 0.85);
        }
        // 内管道高亮
        innerPath.raise();
        requestAnimationFrame(animateBulge);
    }
    requestAnimationFrame(animateBulge);
}
